<template>
  <Transition name="fade">
    <div
      class="message-item"
      :style="{ '--level': message.level }"
      @click.stop="handleClick"
      :class="{
        'message-item--system': message.role == 'system',
        'message-item--user': message.role == 'user',
      }"
    >
      <template v-if="message.role == 'system'">
        <template v-if="message.code == 2">
          <app-markdown :content="message?.content"></app-markdown>
        </template>
        <template v-else-if="message.code == 999">
          <app-webview :url="message.content" />
        </template>
        <div class="text" v-else>
          <Typewriter :content="message.content" typing></Typewriter>
        </div>
      </template>
      <template v-else>
        <div class="text">{{ message.content }}</div>
      </template>
    </div>
  </Transition>
</template>

<script setup>
import { state } from '../chat.js'

import Card from './Card.vue'

import { Typewriter } from 'vue-element-plus-x'

const { messageId } = state

const ioncs = {
  on_llm_start: 'llm',
  on_llm_end: 'llm',
  on_chain_start: 'link',
  on_chain_end: 'link',

  on_tool_start: 'tool',
  on_tool_end: 'tool',
}

const props = defineProps({
  code: String,
  message: Object,
})

const data = computed(() => {
  const code = {}

  return {
    code,
  }
})

const handleClick = () => {
  const { data, role, run_id } = props.message

  if (role == 'system') state.messageId = run_id
}
</script>
<style lang="scss" scoped>
.message-item {
  display: flex;
  margin-bottom: 16px;
  padding-left: calc(var(--level) * 2em);
}

.message-item--user {
  display: flex;
  justify-content: flex-end;
}

.text {
  padding: 12px 16px;
  background-color: #f3f3f3;
  border-radius: 6px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
